<template>
  <view class="c-fold" :style="{ width }" :class="ggclass">
    <view
      class="select"
      ref="content"
      :style="{ height: heights === 'auto' ? '' : heights + 'px', width }"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  defineProps,
  reactive,
  onMounted,
  getCurrentInstance,
  toRefs,
} from "vue";
const { proxy } = getCurrentInstance() as any;
import propsMixin from "../mixins/props/index.js";
const props = defineProps({
  ...propsMixin.props,
  style: {
    type: Object,
    default: () => {
      return {};
    },
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
});
const state = reactive({
  oldHeight: 0,
  isFold: false,
  heights: "auto",
  show: false,
});
const { heights } = toRefs(state);
onMounted(async () => {
  let obj = await proxy.$getNode(".select", this);
  state.oldHeight = obj.height;
  state.heights = "0";
});

const fole = () => {
  state.isFold = !state.isFold;
  if (state.isFold) {
    state.show = true;
    state.heights = JSON.parse(JSON.stringify(state.oldHeight));
  } else {
    state.heights = "0";
    state.show = false;
  }
};
</script>

<style lang="less" scoped>
.c-fold {
  // flex: 1;
  width: 100%;
  position: relative;
  display: block;
  user-select: none;

  .select {
    transition: all 0.2s;
    overflow: hidden;
  }
}
</style>